<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--企业数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-containers">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" />
                </div>
            </el-col>
            <!--小区数据-->
            <el-col :span="20" :xs="24">
                <el-card class="box-card">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="客户名称" prop="customerName">
                            <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable
                                style="width: 150px" />
                        </el-form-item>
                        <!-- <el-form-item label="手机号" prop="imei">
                            <el-input v-model="queryParams.imei" placeholder="请输入手机号" clearable style="width: 150px" />
                        </el-form-item> -->
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>

                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                                v-hasPermi="['fileManagement:civilArchivesQuery:export']">导出</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <el-table v-loading="loading" :data="postList" border @selection-change="handleSelectionChange"
                        @row-click="rowClick">
                        <el-table-column type="selection" width="55" align="center" />
                        <el-table-column label="客户名称" align="center" prop="customerName" />
                        <el-table-column label="DTU编号" align="center" prop="dtuCode" />
                        <!-- <el-table-column label="设备ID" align="center" prop="deviceId" /> -->
                        <el-table-column label="流量计厂家" align="center" prop="flowmeterManufacturer" width="120" />
                        <el-table-column label="基表底数" align="center" prop="baseNumber" />
                        <el-table-column label="报警额度" align="center" prop="alarmGas" />
                        <el-table-column label="基表iccid" align="center" prop="iccid" />
                        <el-table-column label="IMEI" align="center" prop="imei" />
                        <el-table-column label="流量计起始量" align="center" prop="initialGas" width="150" />
                        <el-table-column label="安装日期" align="center" prop="installTime" width="170" />
                        <el-table-column label="气表进气方向" align="center" prop="intakeDirection" width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.intakeDirection == 'L'">左进</span>
                                <span v-if="scope.row.intakeDirection == 'R'">右进</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否带流量计" align="center" prop="isFlowmeter" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.isFlowmeter == 'N'">否</span>
                                <span v-if="scope.row.isFlowmeter == 'Y'">是</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否带GPRS" align="center" prop="isGprs" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.isGprs == 'N'">否</span>
                                <span v-if="scope.row.isGprs == 'Y'">是</span>
                            </template>

                        </el-table-column>
                        <el-table-column label="表计状态" align="center" prop="meterStatus" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.meterStatus == 1">待安装</span>
                                <span v-if="scope.row.meterStatus == 2">正常</span>
                                <span v-if="scope.row.meterStatus == 3">已拆卸</span>
                            </template>

                        </el-table-column>
                        <el-table-column label="通讯地址" align="center" prop="mailAddress" />
                        <el-table-column label="通讯协议" align="center" prop="mailProtocol" />
                        <el-table-column label="表号" align="center" prop="meterCode" />
                        <!-- <el-table-column label="供应商" align="center" prop="meterManufacturer" /> -->
                        <el-table-column label="客户类型" align="center" prop="customerType">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="基表手机号" align="center" prop="meterPhoneNum" width="120" /> -->
                        <!-- <el-table-column label="表具类型" align="center" prop="meterType" /> -->
                        <el-table-column label="工程工料费" align="center" prop="projectFee" width="120" />
                        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-form :model="queryParams1" ref="queryForm1" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="交易方式" prop="tradeType">
                            <el-select v-model="queryParams1.tradeType" filterable placeholder="请选择">
                                <el-option label="全部" value=""> </el-option>
                                <el-option label="现金支付" value="1"> </el-option>
                                <el-option label="扫码支付" value="2"> </el-option>
                                <el-option label="结余转存" value="3"> </el-option>
                                <el-option label="退费" value="4"> </el-option>
                                <el-option label="冲正" value="5"> </el-option>
                                <el-option label="在线缴费" value="6"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="交易时间" prop="openDate">
                            <el-date-picker v-model="queryParams1.openDate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData4" border style="width: 100%">
                        <el-table-column type="index" prop="date" label="交易单号" align="center" width="100">
                        </el-table-column>
                        <el-table-column prop="instructName" label="交易金额(元)" align="center"></el-table-column>
                        <el-table-column prop="flowNo" label="账户余额(元)" align="center">
                        </el-table-column>
                        <el-table-column prop="instructContent" label="交易时间" align="center">
                        </el-table-column>
                        <el-table-column prop="instructType" label="交易方式" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.instructType == '00'">激活</span>
                                <span v-if="scope.row.instructType == '01'">关阀</span>
                                <span v-if="scope.row.instructType == '02'">开阀</span>
                                <span v-if="scope.row.instructType == '03'">调价</span>
                                <span v-if="scope.row.instructType == '04'">充值</span>
                                <span v-if="scope.row.instructType == '05'">扣费</span>
                                <span v-if="scope.row.instructType == '06'">冲正</span>
                                <span v-if="scope.row.instructType == '07'">余额同步</span>
                                <span v-if="scope.row.instructType == '08'">数据采集</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="mchNo" label="支付方式" align="center">
                        </el-table-column>
                        <el-table-column prop="operUser" label="抄表起码" align="center">
                        </el-table-column>
                        <el-table-column prop="sendTime" label="抄表止码" align="center">
                        </el-table-column>
                        <el-table-column prop="sendTime1" label="抄表止码日期" align="center">
                        </el-table-column>
                        <el-table-column prop="remark" label="用量合计(m3)" align="center">
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total1 > 0" :total="total1" :page.sync="queryParams1.pageNum"
                        :limit.sync="queryParams1.pageSize" @pagination="getInstructList" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { meterarchivesList, } from "@/api/fileManagement/meterarchives.js"
import { instructList, } from "@/api/fileManagement/civilArchives.js"
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import { deptTreeSelect, } from "@/api/system/user";

export default {
    name: "TurnoverYear",
    dicts: ["sys_normal_disable", "customer_type"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            total1: 0,
            // 小区表格数据
            userList: null,
            // 弹出层标题
            title: "",
            //表计弹出层标题
            title2: "",
            // 企业树选项
            deptOptions: undefined,
            // 企业名称
            deptName: undefined,
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
            },
            queryParams1: {

            },
            // 查询参数
            queryParams1: {
                pageNum: 1,
                pageSize: 10,
            },

            activeName: "1",
            tableData: [{}],
            tableData4: [{}],
            value2: "",
            radio: 1,
            value3: "",
            postList: [],
        };
    },
    watch: {
        // 根据名称筛选企业树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getList();
        this.getDeptTree();
    },
    methods: {
        // 表格行点击
        rowClick(row) {
            this.queryParams1.customerId = row.customerId
        },

        handleSelectionChange() { },
        handleClick(tab, event) {
            console.log(tab.name, event);
            if (tab.name == 4) {
                this.getInstructList()
            } else if (tab.name == 2) {

            }

        },
        // 获取记录查询
        getInstructList() {
            instructList(this.queryParams1).then((res) => {
                this.tableData4 = res.rows
                this.total1 = res.total
            })
        },
        /** 查询小区列表 */
        getList() {
            this.loading = true;
            meterarchivesList(this.queryParams).then((response) => {
                this.postList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 查询企业下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        handleQuery1() {

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.deptId = undefined;
            this.$refs.tree.setCurrentKey(null);
            this.handleQuery();
        },
        resetQuery1() {
            this.resetForm("queryForm1");
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/meterarchives/export",
                {
                    ...this.queryParams,
                },
                `user_${new Date().getTime()}.xlsx`
            );
        },
    },
};
</script>
<style lang="scss" scoped>
.head-containers {
    width: 200px;
    overflow: auto;

    .el-tree {
        min-width: 100%;
        display: inline-block !important;
    }
}

.tablex {
    width: 100%;
    border-collapse: collapse;
    border-color: #ebeef5;

    td {
        width: 25%;
        padding: 10px;
        color: #606266;
        font-size: 14px;
    }

    .lables {
        background: rgba(150, 154, 184, 0.05);
        text-align: right;
    }
}
</style>
  